<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="520px"
    top="0"
    :before-close="cancelBtn"
    :close-on-click-modal="false"
    @open="open"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      class="checkForm"
    >
      <el-form-item label="经销商名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="填写经销商名称"
          size="small"
        />
      </el-form-item>
      <el-form-item class="btn">
        <el-button @click="cancelBtn">取消</el-button>
        <el-button type="primary" @click="confirm">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import {GetAgencyInfo, CreateAgency, EditAgency} from "@/api/campSystem/campOper";

  export default {
    name: "AgencyForm",
    props: {
      dialogVisibleFu: Boolean,
      formDataFu: [Object, String]
    },
    data() {
      return {
        dialogVisible: this.dialogVisibleFu,
        formData: this.formDataFu,
        rules: {
          name: [
            {required: true, message: '请填写经销商名称', trigger: 'blur'}
          ],
        },
        title: '添加经销商',
      };
    },
    methods: {
      open() {
        if (this.type == 2) {
          this.getInfo();
        }
      },
      // 获取详细信息
      getCheckInfo() {
        GetAgencyInfo(this.formData.uuid)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.formData = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 提交按钮
      confirm() {
        this.$refs['formRef'].validate((valid) => {
          if (!valid) return
          if (this.formData.uuid) {
            // 编辑
            EditAgency(this.formData)
              .then(response => {
                console.log(response);
                if (response.code != 200) {
                  return this.msgError(response.msg);
                }
                this.msgSuccess(response.msg);

                this.dialogVisible = false;
                this.$refs["formRef"].resetFields();
                this.$emit("closeDialog", this.dialogVisible, true);
              })
              .catch(error => {
                console.log(error);
              });
          } else {
            // 添加
            console.log(this.formData)
            CreateAgency(this.formData)
              .then(response => {
                console.log(response);
                if (response.code != 200) {
                  return this.msgError(response.msg);
                }
                this.msgSuccess(response.msg);

                this.dialogVisible = false;
                this.$refs["formRef"].resetFields();
                this.$emit("closeDialog", this.dialogVisible, true);
              })
              .catch(error => {
                console.log(error);
              });
          }
        })
      },
      // 取消,关闭弹框，修改父组件的值
      cancelBtn() {
        this.dialogVisible = false;
        this.$refs["formRef"].resetFields();
        this.$emit("closeDialog", this.dialogVisible, false);
      },
    },
    watch: {
      dialogVisibleFu() {
        this.dialogVisible = this.dialogVisibleFu;
      },
      formDataFu() {
        this.formData = this.formDataFu;
        console.log(this.formData)
        if (this.formData.uuid) {
          this.title = '编辑经销商';
        } else {
          this.title = '添加经销商';
        }

      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog {
    height: auto;
    display: flex;
    flex-flow: column;

    .el-dialog__header {
      text-align: center;
      padding: 20px;
    }

    .el-dialog__body {
      padding: 10px 50px 30px;
      flex: 1;
      overflow-y: scroll;
      display: flex;
      flex-flow: column;

      .checkForm {
        flex: 1;

        .el-form-item {
          margin-bottom: 20px;

          .el-form-item__label {
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #12141C;
          }

          .el-form-item__content {
            height: 40px;
            line-height: 40px;

            .el-input,
            .el-input.is-disabled {
              height: 40px;

              .el-input__inner {
                height: 40px;
                border-radius: 4px;
                border: 1px solid #E1E3E6;
                background-color: #FFFFFF;
                color: #656872;

                &:hover {
                  border-color: #4D75F3;
                }

                &:focus {
                  border-color: #4D75F3;
                }
              }
            }

            .el-radio-group {
              .el-radio {
                .el-radio__label {
                  color: #656872;
                }

                .el-radio__input,
                .el-radio__input.is-disabled {
                  .el-radio__inner {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 50%;
                  }

                  &.is-checked {
                    .el-radio__inner {
                      background: #ffffff !important;
                      border-color: #4D75F3;

                      &::after {
                        width: 7.5px;
                        height: 7.5px;
                        background: #4D75F3 !important;
                      }
                    }
                  }
                }
              }
            }

            .el-select {
              width: 100%;
            }
          }

          &.btn {
            .el-form-item__content {
              text-align: right;
            }
          }
        }
      }
    }
  }
</style>


